<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Width</title>
    <style>
        #main{
            width: 600px;
            margin: 0 auto;
        }
        #main-1{
            max-width: 600px;
            margin: 0 auto;
        }
    </style>
</head>
<body>
<div id="main">
    设置块级元素的 width 可以防止它从左到右撑满整个容器。然后你就可以设置左右外边距为 auto 来使其水平居中。元素会占据你所指定的宽度，然后剩余的宽度会一分为二成为左右外边距。

    唯一的问题是，当浏览器窗口比元素的宽度还要窄时，浏览器会显示一个水平滚动条来容纳页面。让我们再来改进下这个方案...
</div>
<div id="main-1">
    在这种情况下使用 max-width 替代 width 可以使浏览器更好地处理小窗口的情况。这点在移动设备上显得尤为重要，调整下浏览器窗口大小检查下吧！

    顺便提下， 所有的主流浏览器包括IE7+在内都支持 max-width ，所以放心大胆的用吧。

</div>
</body>
</html>
